<template>
  <div style="background-color: #fff; padding: 20px">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="淘宝订单" prop="orderSn">
        <el-input v-model="ruleForm.orderSn"></el-input>
      </el-form-item>

      <el-form-item label="是否自动接单" prop="delivery">
        <el-switch v-model="ruleForm.status"></el-switch>
      </el-form-item>
      <el-form-item label="单价" prop="price">
        <el-input v-model.number="ruleForm.price"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >立即发布</el-button
        >
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { addorder } from '../../api/order';
export default {
  name: 'add',
  data() {
    return {
      ruleForm: {
        orderSn: '',
        price: '',
        status: 0,
      },
      rules: {
        orderSn: [
          { required: true, message: '订单不能为空', trigger: 'blur' },
          { min: 9, message: '长度最少9个字符', trigger: 'blur' },
        ],
        region: [
          { required: true, message: '请选择活动区域', trigger: 'change' },
        ],
        price: [
          { required: true, message: '请输入金额', trigger: 'blur' },
          { type: 'number', message: '年龄必须为数字值' },
        ],
        date2: [
          {
            type: 'date',
            required: true,
            message: '请选择时间',
            trigger: 'change',
          },
        ],
        type: [
          {
            type: 'array',
            required: true,
            message: '请至少选择一个活动性质',
            trigger: 'change',
          },
        ],
        resource: [
          { required: true, message: '请选择活动资源', trigger: 'change' },
        ],
        desc: [{ required: true, message: '请填写活动形式', trigger: 'blur' }],
      },
    };
  },
  methods: {
    submitForm(formName) {
      // validate 校验
      //   this.$refs[formName];
      this.$refs[formName].validate(async (val) => {
        if (val) {
          // 发数据
          let result = await addorder(this.ruleForm);
          if (result.code == 2000) {
            this.$message({
              message: '恭喜你，发布成功',
              type: 'success',
            });
            this.$refs[formName].resetFields();
          }
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style lang="scss" scoped></style>
